<template>
  <div>
    <el-form inline>
      <el-form-item label="关键字">
        <el-input v-model="searchDTO.searchValue"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogVisible=true">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="flashSaleSession" v-loading="loading">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"/>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text type="danger" @click="openModify(scope.row.id)">修改</el-text>
          <br>
          <el-text type="primary" @click="openRelevancyDialog(scope.row.id)">关联商品</el-text>
          <br>
          <el-text @click="upSessionSkuFun(scope.row.id)">上架到内存</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      v-model="modifyDialogVisible"
      title="修改秒杀场次"
      width="500">
    <div>
      <el-form label-width="80">
        <el-form-item label="场次名称">
          <el-input v-model="modifyFlashSale.title"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="modifyFlashSale.startTime"
              type="datetime"
              placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="modifyFlashSale.endTime"
              type="datetime"
              placeholder="请选择结束时间"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="modifyFlashSale.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitModifyFlashSale">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible"
      title="新增秒杀场次"
      width="500">
    <div>
      <el-form label-width="80">
        <el-form-item label="场次名称">
          <el-input v-model="addFlashSale.title"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="addFlashSale.startTime"
              type="datetime"
              placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="addFlashSale.endTime"
              type="datetime"
              placeholder="请选择结束时间"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="addFlashSale.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFlashSale">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="relevancyDialogVisible"
      title="商品关联"
      width="600"
  >
    <div>
      <el-form :model="skuFlashSaleSearchDTO" inline>
        <el-form-item>
          <el-input v-model="skuFlashSaleSearchDTO.searchValue" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="relevancyAddDialogVisible=true">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="skuFlashSales" v-loading="relevancyLoading">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="skuId" label="商品编号"></el-table-column>
        <el-table-column prop="flashSalePrice" label="秒杀价格"></el-table-column>
        <el-table-column prop="flashSaleStock" label="投放库存"></el-table-column>
        <el-table-column prop="flashSaleLimit" label="购买限制"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="relevancyDialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="relevancyAddDialogVisible"
      title="新增sku关联"
      width="500"
  >
    <div>
      <el-form label-width="100" :model="skuFlashSale">
        <el-form-item label="秒杀场次id">
          <el-input v-model="skuFlashSale.sessionId"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="skuFlashSale.skuId"></el-input>
        </el-form-item>
        <el-form-item label="秒杀价格">
          <el-input-number v-model="skuFlashSale.flashSalePrice"></el-input-number>
        </el-form-item>
        <el-form-item label="投入库存">
          <el-input-number v-model="skuFlashSale.flashSaleStock"></el-input-number>
        </el-form-item>
        <el-form-item label="购买限制">
          <el-input-number v-model="skuFlashSale.flashSaleLimit"></el-input-number>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="skuFlashSale.sort"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="relevancyAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRelevancy">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {
  getFlashSale,
  getFlashSaleById,
  getFlashSaleSku,
  saveFlashSale,
  saveFlashSaleSku, updateFlashSale, upSessionSku
} from "@/api/home/discount/flashSale";

let flashSaleSession = ref([])
let dialogVisible = ref(false)
let modifyDialogVisible = ref(false)
let relevancyDialogVisible = ref(false)
let relevancyAddDialogVisible = ref(false)
let modifyFlashSale = ref({})
let loading = ref(true)
let relevancyLoading=ref(true)
let addFlashSale = reactive({
  title: "",
  startTime: "",
  endTime: '',
  status: "0",
})
//秒杀场次和sku关联的查询参数
let skuFlashSaleSearchDTO = reactive({
  pageNum: 1,
  pageSize: 5,
  searchValue: '',
  sessionId: String
})
//秒杀场次的查询参数
let flashSaleSearchDTO = reactive({
  pageNum: 1,
  pageSize: 10,
  searchValue: ''
})

let skuFlashSales = ref([])
let skuFlashSale = reactive({
  skuId: String,
  sessionId: "",
  flashSalePrice: Number,
  flashSaleStock: Number,
  flashSaleLimit: Number,
  sort: Number
})

function getFlashSaleSession() {
  loading.value = true
  getFlashSale(flashSaleSearchDTO).then(res => {
    flashSaleSession.value = res.data.records
    loading.value = false
  })
}

function submitModifyFlashSale() {
  updateFlashSale(modifyFlashSale.value).then(() => {
    getFlashSaleSession()
    modifyDialogVisible.value = false
  })
}

function openRelevancyDialog(id) {
  //查询这个场次关联的所有sku列表
  relevancyLoading.value = true
  skuFlashSaleSearchDTO.sessionId = id
  getFlashSaleSku(skuFlashSaleSearchDTO).then(res => {
    skuFlashSales.value = res.data.records
    relevancyLoading.value = false
  })
  relevancyDialogVisible.value = true
}

function submitRelevancy() {
  saveFlashSaleSku(skuFlashSale).then(res => {
    getFlashSaleSku(skuFlashSaleSearchDTO).then(res => {
      skuFlashSales.value = res.data
    }).finally(() => {
      relevancyAddDialogVisible.value = false
    })
  })
}

function openModify(id) {
  getFlashSaleById(id).then(res => {
    modifyFlashSale.value = res.data
  }).finally(() => {
    modifyDialogVisible.value = true
  })
}

function submitFlashSale() {
  saveFlashSale(addFlashSale).then(() => {
    getFlashSaleSession()
  }).finally(() => {
    dialogVisible.value = false
  })
}

/**
 * 将这个场次的商品上架到内存中
 * @param sessionId
 */
function upSessionSkuFun(sessionId) {
  upSessionSku(sessionId)
}

onMounted(() => {
  getFlashSaleSession()
})
</script>

<style scoped>

</style>
